<template>
	<view class="pages">
		<!-- <view class="status_bar" :style="{height: (navHeight/2)+'upx'}"></view> -->
		<view class="topbox" :style="{background:background}">
			<view class="topnav" v-if="showIcon">
				<image src="/static/images/nav.png" mode="" @click="goBackFn"></image>
			</view>
			<text class="title">
				{{title}}
			</text>
			<view class="right_text" @click="bianRighFn">
				<view class="" v-if="right_text">
					<view class="txt">{{right_text}}</view>
				</view>
				<slot v-else name="right_text"></slot>
			</view>

		</view>


	</view>
</template>

<script>
	import sun from '@/utils/sun.js'
	export default {
		name: "navigation",
		//属性
		props: {
			//是否显示返回icon
			showIcon: {
				type: Boolean,
				default: true

			},
			//名字
			title: {
				type: String, //属性类型
				default: '' //white/black
			},
			//名字
			right_text: {
				type: String, //属性类型
				default: ''
			},
			//背景颜色
			background: {
				type: String, //属性类型
				default: '#ffffff' //white/black
			},
			navigateTo: { //要跳转的路径
				type: String,
				default: ""
			},
			redirectTo: { //要跳转的路径
				type: String,
				default: ""
			},
			switchTab: { //要跳转的路径
				type: String,
				default: ""
			},
			navigateBack: { //要跳转的路径
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				navHeight: sun.getStatusBarHeight(),
				topheight: '',
			}
		},
		//组件生命周期
		created: function(e) {
			this.$nextTick(function() {
				let _this = this;
				let view = uni.createSelectorQuery().in(this).select(".topbox");
				view.fields({
					size: true,
					scrollOffset: true
				}, data => {
					_this.topheight = data.height
					_this.$emit('topHeight', data.height)
				}).exec();
			})
		},
		onBackPress() {

		},
		methods: {
			// 返回
			goBackFn() {

				if (this.navigateTo) {
					uni.switchTab({
						url: this.navigateTo
					});
				}
				
				if (this.redirectTo) {
					uni.switchTab({
						url: this.redirectTo
					});
				}
				
				if (this.switchTab) {
					uni.switchTab({
						url: "/pages/my/my",
						fail(e) {}
					});
				}
				
				if (this.navigateBack) {
					let _this = this;
					uni.navigateBack({
						delta: this.navigateBack,
						success: () => {
							_this.$emit("binnavigateBack", "ok")
						},
					});
				}
			},
			//设置
			setTingFn() {
				this.$emit('setTingFn', "ok")
			},
			//右边点击
			bianRighFn() {
				this.$emit('bianRigh', "ok")
			}

		}
	}
</script>

<style lang="less">
	.status_bar {
		height: 30px;
		width: 100vW;
		background: #007AFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 11;
	}

	.pages {
		// padding-top: var(--status-bar-height);
		// background: #007AFF;
	}

	.topbox {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		width: 654upx;
		height: 120rpx;
		padding: 0 48upx 0 48upx;
		display: flex;
		justify-content: left;
		align-items: center;

		// box-sizing: border-box;
		.topnav {
			width: 44upx;
			height: 44upx;

			// margin-right: 17upx;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(0, 0, 0, 1);
		}
	}

	.right_text {
		position: absolute;
		right: 20upx;
		top: 50%;
		transform: translate(-50%, 0);

		.txt {
			font-size: 18upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(82, 123, 241, 1);
			text-align: center;
		}

	}
</style>
